<template>
  <basic-dialog :visible="show"
                title="不良明细"
                isShowClose
                :min-width="'760px'"
                :isShowInnerLoading="isShowInnerLoading"
                @close="show = false"
  >
    <q-table
      :data="tableData" :columns="columnsBadDetails"
      row-key="name" class="myTable scroll inherit"
      style="margin: 0; max-height: 280px"
      :pagination.sync="paginationBadDetails" :hide-bottom="!!tableData.length">
    </q-table>
  </basic-dialog>
</template>

<script>
import { orderQualityLogs } from 'src/boot/job/process-order'
import moment from 'moment'

export default {
  name: 'bad-detail',
  data () {
    return {
      show: false,
      tableData: [],
      // 不良明细表格数据列
      columnsBadDetails: [
        { name: 'id', label: '编号', align: 'left', field: 'id' },
        { name: 'gidName', label: '不良原因类型', align: 'left', field: 'gidName' },
        { name: 'causeName', label: '不良原因', align: 'left', field: 'causeName' },
        { name: 'shiftsName', label: '班制', align: 'left', field: 'shiftsName' },
        { name: 'count', label: '不良数量', align: 'left', field: 'count' },
        { name: 'name', label: '录入人', align: 'left', field: 'name' },
        { name: 'createTime', label: '录入时间', align: 'left', field: 'createTime' }
      ],
      // 不良明细表格分页器
      paginationBadDetails: {
        rowsPerPage: 0
      },
      isShowInnerLoading: false
    }
  },
  methods: {
    // 打开不良明细
    openBadDetails (id) {
      this.show = true
      this.isShowInnerLoading = true
      orderQualityLogs(id, '1').then(res => {
        this.tableData = res.data.map(o => {
          o.createTime = moment(o.createTime).format('YYYY-MM-DD HH:mm:ss')
          return {
            ...o
          }
        })
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
